<template>
  <div class="dataPanel">
    <div class="block">
      <div class="right">
        <span class="number">{{ number }}</span>
        <span class="desc">{{ desc }}</span>
      </div>

      <div class="pic"><img :src="src" alt="" /></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      require: String,
      default: ''
    },
    number: {
      require: Number,
      default: 6666
    },
    desc: {
      require: String,
      default: '用户数量'
    }
  },
  computed: {
    src () {
      let src = ''
      switch (this.type) {
        case 'weekMeeting':
          src = require('@/assets/components/weekMeeting.png')
          break
        case 'meetingNumber':
          src = require('@/assets/components/meetingNumber.png')
          break
        case 'mouthMeeting':
          src = require('@/assets/components/mouthMeeting.png')
          break
        case 'userCount':
          src = require('@/assets/components/userCount.png')
          break
      }
      return src
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  width: 390px;
  height: 162px;
  background:#fff;
  border-radius: 8px;
  position: relative;
  .number {
    position: absolute;
    top: 47px;
    left: 70px;
    font-size: 30px;
    font-weight: 600;
  }
  .desc {
    position: absolute;
    top: 93px;
    left: 70px;
    font-size: 14px;
    font-weight: 400;
    color: #a5aebf;
  }
  .pic {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 41px;
    right: 67px;
    img {
      width: 100%;
    }
  }
}
</style>
